{% extends "kjs/eagleye/social/templates/base.html" %}

{% block eagleye_body %}
    <style type="text/css">
        div#eagleye_social_bind_widget {
            width:1024px;
            min-width:1024px;
            max-width:1024px;
            margin:0 auto;
            background:#f8f8ff;
        }
        div.eagleyePanel {
            width:50%;
            height:600px;
            min-height:600px;
        }
        div#eagleye_right_panel {
            float:right;
            overflow:hidden;
        }
        div.eagleyeUserPanel {
            text-align:center;
        }
        div.eagleyeUserPanel img {
            width:150px;
            height:150px;
            margin:120px 20px 20px 20px;
        }
        div.eagleyeUserPanel label {
            font-size:24px;
        }

            /**
            更改账号类型的控件
            */
        div.changeBindAccountType {
            width:100px;
            height:600px;
            z-index:999;
        }
        div.changeBindAccountType:hover {
            cursor:pointer;
            background-color:#333333;
            opacity:0.5;
        }
            /**
            actionTitle
            */
        .actionTitleDiv {
            margin:0 auto;
            width:300px;
            height:50px;
            background-color:#00bfff;
            text-align:center;
            line-height:50px;
            color:white;
            font-weight:bold;
        }
        .actionTitle {
            background-color:#00bfff;
            padding:0 20px;
        }
        .showPanel {
            text-align:center;
        }

        button.bindBtn {
            width:180px;
            padding:10px 0;
            border:0 solid white;
            margin:0 10px;

        }
        button.bindBtn:hover {
            box-shadow:4px 4px 4px gray;
            cursor:pointer;
        }
        button.bindBtn:active {
            box-shadow:none;
        }

    </style>
    <div id="eagleye_social_bind_widget">
        <div style="position:absolute;width:1024px;z-index:9999;height:0;">
            <div style="float:left;" id="changeAccountToLeftBtn" class="changeBindAccountType"></div>
            <div style="float:right;" id="changeAccountToRightBtn" class="changeBindAccountType"></div>
        </div>
        <div class="actionTitleDiv">
            <label class="actionTitle"></label>
        </div>
        <div id="eagleye_right_panel" class="eagleyePanel">
            <div>
                {% if current_bind_type == None %}
                {% if user and user.is_authenticated %}
                <div class="eagleyeUserPanel showPanel">
                    <div>
                        <img src="{{ STATIC_URL }}rainbow/images/0/{{ user.profile.snapshot.value }}.jpeg" />
                        <input type="hidden" name="bind_type" value="{{ bind_consts.BIND_TYPE_LOGIN_USER }}"/>
                    </div>
                    <label>{{ user.profile.nickname.value }}</label>
                    <input type="hidden" name="panelTitle" value="与登陆账户绑定"/>
                </div>
                {% endif %}
                <div id="bind_exist_account_form" class="showPanel">
                    <form action="/eagleye/social/bind/?social_auth={{ social_auth_id }}" method="POST" class="eagleye_form" style="width:300px;margin:0 auto;">
                        {% include "kjs/eagleye/social/templates/widgets/login_form.html" %}
                        <input type="hidden" name="bind_type" value="{{ bind_consts.BIND_TYPE_RE_LOGIN_USER }}"/>
                    </form>
                    <input type="hidden" name="panelTitle" value="与其他账户绑定"/>
                </div>
                <div id="bind_new_account_form" class="showPanel">
                    <form action="/eagleye/social/bind/?social_auth={{ social_auth_id }}" method="POST" class="eagleye_form" style="width:300px;margin:0 auto;">
                        {% include "kjs/eagleye/social/templates/widgets/register_form.html" %}
                        <input type="hidden" name="bind_type" value="{{ bind_consts.BIND_TYPE_NEW_REGISTER_USER }}"/>
                    </form>
                    <input type="hidden" name="panelTitle" value="与新的账户绑定"/>
                </div>
                {% else %}
                    {% if current_bind_type == bind_consts.BIND_TYPE_LOGIN_USER %}
                        {% if user and user.is_authenticated %}
                            <div class="eagleyeUserPanel showPanel">
                                <div>
                                    <img src="{{ STATIC_URL }}rainbow/images/0/{{ user.profile.snapshot.value }}.jpeg" />
                                    <input type="hidden" name="bind_type" value="{{ bind_consts.BIND_TYPE_LOGIN_USER }}"/>
                                </div>
                                <label>{{ user.profile.nickname.value }}</label>
                                <input type="hidden" name="panelTitle" value="与登陆账户绑定"/>
                            </div>
                        {% else %}
                            <div id="bind_exist_account_form" class="showPanel">
                                <form action="/eagleye/social/bind/?social_auth={{ social_auth_id }}" method="POST" class="eagleye_form" style="width:300px;margin:0 auto;">
                                    {% include "kjs/eagleye/social/templates/widgets/login_form.html" %}
                                    <input type="hidden" name="bind_type" value="{{ bind_consts.BIND_TYPE_RE_LOGIN_USER }}"/>
                                </form>
                                <input type="hidden" name="panelTitle" value="与其他账户绑定"/>
                            </div>
                        {% endif %}
                    {% elif current_bind_type == bind_consts.BIND_TYPE_RE_LOGIN_USER %}
                        <div id="bind_exist_account_form" class="showPanel">
                            <form action="/eagleye/social/bind/?social_auth={{ social_auth_id }}" method="POST" class="eagleye_form" style="width:300px;margin:0 auto;">
                                {% include "kjs/eagleye/social/templates/widgets/login_form.html" %}
                                <input type="hidden" name="bind_type" value="{{ bind_consts.BIND_TYPE_RE_LOGIN_USER }}"/>
                            </form>
                            <input type="hidden" name="panelTitle" value="与其他账户绑定"/>
                        </div>
                    {% elif current_bind_type == bind_consts.BIND_TYPE_NEW_REGISTER_USER %}
                        <div id="bind_new_account_form" class="showPanel">
                            <form action="/eagleye/social/bind/?social_auth={{ social_auth_id }}" method="POST" class="eagleye_form" style="width:300px;margin:0 auto;">
                                {% include "kjs/eagleye/social/templates/widgets/register_form.html" %}
                                <input type="hidden" name="bind_type" value="{{ bind_consts.BIND_TYPE_NEW_REGISTER_USER }}"/>
                            </form>
                            <input type="hidden" name="panelTitle" value="与新的账户绑定"/>
                        </div>
                    {% endif %}
                {% endif %}
            </div>
        </div>
        <div id="eagleye_left_panel" class="eagleyePanel">
            <div class="eagleyeUserPanel">
                <div>
                    <img src="{{ social_auth.social_user.snapshot }}" />
                </div>
                <label>{{ social_auth.social_user.name }}@{{ social_auth.social_user.platform.name }}</label>
            </div>
        </div>
        <div style="text-align:center;">
            <form action="/eagleye/social/bind/?social_auth={{ social_auth_id }}" method="POST" class="eagleyeSocialBindForm">
                {% csrf_token %}
                <input type="hidden" name="bind_type" value="{{ default_bind_type }}"/>
                <button id="bind_account_btn" class="bindBtn">立刻绑定</button>
                <button id="unbind_account_btn" class="bindBtn">不需要绑定任何账号</button>
            </form>
            <script type="text/javascript">
                $(document).ready(function(){
                    var form = $("form.eagleyeSocialBindForm");
                    $("button#bind_account_btn").click(function(){
                        var bindType = form.find("input[name='bind_type']").val();
                        bindType = parseInt(bindType);
                        if (parseInt("{{ bind_consts.BIND_TYPE_RE_LOGIN_USER }}") == bindType
                                || parseInt("{{ bind_consts.BIND_TYPE_NEW_REGISTER_USER }}") == bindType) {
                            var bindForm = null;
                            if (parseInt("{{ bind_consts.BIND_TYPE_RE_LOGIN_USER }}") == bindType) {
                                bindForm = $("div#bind_exist_account_form").find("form");
                            } else {
                                bindForm = $("div#bind_new_account_form").find("form");
                            }
                            bindForm.submit();
                            return false;
                        }
                        return true;
                    });
                    $("button#unbind_account_btn").click(function(){
                        $(this).parent().find("input[name='bind_type']").val("{{ bind_consts.BIND_TYPE_RANDOM_NEW_USER }}");
                        return true;
                    });
                });
            </script>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
            var eagleyeRightPanel = $("div#eagleye_right_panel");
            var showPanels = $("div.showPanel");
            showPanels.parent().css({
                width:eagleyeRightPanel.width(),
                height:eagleyeRightPanel.height(),
                position:"absolute",
                overflow:"hidden"
            });
            var rightBtn = $("div#changeAccountToRightBtn");
            if (showPanels.size() == 1) {
                rightBtn.parent().remove();
            }
            for (var i=0; i<showPanels.size(); i++) {
                var showPanel = $(showPanels.get(i));
                showPanel.css({
                    "margin-left":0 - eagleyeRightPanel.width() * i,
                    position:"absolute",
                    width:eagleyeRightPanel.width()
                });
                if (i == 0) {
                    $(".actionTitle").text(showPanel.find("input[name='panelTitle']").val());
                    $("form.eagleyeSocialBindForm").find("input[name='bind_type']").val(
                            showPanel.find("input[name='bind_type']").val()
                    );
                }
            }
            rightBtn.click(function(){
                var showPanels = $("div.showPanel");
                for (var i=0; i<showPanels.size(); i++) {
                    var showPanel = $(showPanels.get(i));
                    showPanel.animate({"margin-left":"+=" + showPanel.width()}, 600, function(){
                        var marginLeft = $(this).css("margin-left");
                        marginLeft = marginLeft.substring(0, marginLeft.indexOf("px"));
                        marginLeft = parseInt(marginLeft);
                        if (marginLeft > 0) {
                            $(this).css({
                                "margin-left":0 - (showPanels.size() - 1) * $(this).width()
                            });
                        } else if (marginLeft == 0) {
                            $(".actionTitle").text($(this).find("input[name='panelTitle']").val());
                            $("form.eagleyeSocialBindForm").find("input[name='bind_type']").val(
                                    $(this).find("input[name='bind_type']").val()
                            );
                        }
                    });
                }
            });
        });
    </script>
{% endblock %}